import { Tabs, Typography } from '@arco-design/web-react'
import TabPane from '@arco-design/web-react/es/Tabs/tab-pane'
import { memo } from 'react'
import type { FC, ReactNode } from 'react'
// import { useLocation, useNavigate } from'react-router-dom'

interface IProps {
  children?: ReactNode
}

const Classification: FC<IProps> = () => {

  return (
    <div>
      <h2 className="text-2xl font-bold text-gray-600 mb-4">音乐字典</h2>
      <Tabs type='rounded' defaultActiveTab='recommend'>
        <TabPane key='recommend' title='精选'>
          <Typography.Paragraph>Content of Tab Panel 1</Typography.Paragraph>
        </TabPane>
        <TabPane key='hot' title='热门'>
          <Typography.Paragraph>Content of Tab Panel 2</Typography.Paragraph>
        </TabPane>
        <TabPane key='new' title='排行'>
          <Typography.Paragraph>Content of Tab Panel 2</Typography.Paragraph>
        </TabPane>
        <TabPane key='singer' title='歌手'>
          <Typography.Paragraph>Content of Tab Panel 3</Typography.Paragraph>
        </TabPane>
        <TabPane key='classify' title='分类歌单'>
          <Typography.Paragraph>Content of Tab Panel 4</Typography.Paragraph>
        </TabPane>
      </Tabs>
    </div>
  )
}

export default memo(Classification)
